const id = location.href.split("=")[1];
console.log(id)
$.ajax({
    url:"http://localhost:3000/api",
    data:{
        type:"detail",
        id:id
    },
    success:res=>{
        // 解析并查看数据
        console.log(res);

        // 开始渲染指定的页面结构

        // 图片的渲染
        $(".left-pro .t2 .MagicZoom").children("img")[0].src = res.url;
        res.imgs.forEach(err=> {
            
            $("#showArea a img")[0].src = err;
        });

        // 标题渲染
        $(".shop_tit").html(res.title);

       
        new BigImg({
            
            sBspan:document.querySelector(".MagicZoom span"),
            sBox:document.querySelector(".MagicZoom"),
            bBox:document.querySelector(".bigBox"),
            sBimg:document.querySelector(".MagicZoom img"),
            bBimg:document.querySelector(".bigBox img"),
            imgBox:document.querySelector(".showArea"),
            imgs:document.querySelectorAll(".showArea a img")
        })
        
    },
    dataType:"json"
})

// class BigImg(ops){
//     constructor(){
//         this.sBox = document.querySelector(".MagicZoom");
//         this.sBimg = document.querySelector(".main_img");
//         this.sBspan = document.querySelector(".smallSpan");
//         this.bBox = document.querySelector(".bigBox");
//         this.bBimg = document.querySelector(".bigBox img");

//         this.li = document.querySelectorAll(".t1 a");
//        res.forEach(err => {
//         this.data = err.imgs;
//        });

//         this.index = 0;
       
//         this.addEvent()
        
//     }
    
//     addEvent(){
//         const that = this;
//         for(let i=0;i<this.li.length;i++){
//             this.li[i].index = i;
//             this.li[i].onclick = function(){
//                 // 4. 取消默认索引对应的样式，并给当前点击的索引添加样式
//                 that.li[that.index].style.borderColor = "transparent";

//                 that.li[this.index].style.borderColor = "blue";
//                 that.sBimg.src = that.data[this.index];
//                 that.bBimg.src = that.data[this.index];
                
//                 // 5. 点击功能执行结束后，将默认索引修改成点击的索引
//                 that.index = this.index;
//             }
//         }
//         this.sBox.onmouseover = function(){
//             that.show()
//         }
//         this.sBox.onmouseout = function(){
//             that.hide()
//         }
//         this.sBox.onmousemove = function(eve){
//             const e = eve || window.event;
//             that.move(e)
//         }
//     }
//     show(){
//         this.sBspan.style.display = "block";
//         this.bBox.style.display = "block";
//         this.sBspan.style.width = this.bBox.offsetWidth / this.bBimg.offsetWidth * this.sBox.offsetWidth + "px";
//         this.sBspan.style.height = this.bBox.offsetHeight / this.bBimg.offsetHeight * this.sBox.offsetHeight + "px";
//         // console.log(this.bBimg.offsetHeight)
//     }
//     hide(){
//         this.sBspan.style.display = "none";
//         this.bBox.style.display = "none";
//     }
//     move(e){
//         let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth - 10/ 2;
//         let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight - 400/ 2;
//         // console.log(this.sBox.offsetTop+this.sBspan.offsetHeight)
       
//         if(l<0) l=0;
//         if(t<0) t=0; 
//         if(l>this.sBox.offsetWidth-this.sBspan.offsetWidth){
//             l=this.sBox.offsetWidth-this.sBspan.offsetWidth
//         }
//         if(t>(this.sBox.offsetHeight-this.sBspan.offsetHeight)){
//             t=this.sBox.offsetHeight-this.sBspan.offsetHeight
//         }
//         this.sBspan.style.left = l + "px";
//         this.sBspan.style.top = t + "px";
//         const x = l / (this.sBox.offsetWidth-this.sBspan.offsetWidth);
//         const y = t / (this.sBox.offsetHeight-this.sBspan.offsetHeight);
//         this.bBimg.style.left = -x * (this.bBimg.offsetWidth - this.bBox.offsetWidth) + "px";
//         this.bBimg.style.top = -y * (this.bBimg.offsetHeight - this.bBox.offsetHeight) + "px";
        
//     }
// }
